<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bottom{
  width: 1200px;
  height: 100px;
  margin: auto;
   font-family:楷体;
  color: #8c8c8c;
  text-align: center;
  line-height: 50px;
  border-top: solid 2px darkgray;
}
#conb {
	background-image: url(img/f10.jpg);
	background-size: 100% 100%;
	width: 1900px;
	height: 2940px;
	z-index: -1;
	background-repeat: repeat-y;
}

#top {
	width: 1900px;
	height: 160px;
	margin: 0px auto;
	2px;
}

#top1 {
	width: 1200px;
	height: 80px;
	margin: auto;
	2px;
}

#top2 {
	width: 1200px;
	height: 50px;
	margin: 0px auto;
	background: #FF6B37;
}

#logo {
	margin-top: 15px;
	width: 300px;
	float: left;
}

.top:link {
	color: #000000;
	text-decoration: none;
}

.top:visited {
	color: #000000;
	text-decoration: none;
}

.res:link {
	color: #838a94;
	text-decoration: none;
}

.res:visited {
	color: #838a94;
	text-decoration: none;
}

#allnav {
	width: 1200px;
	height: 300px;
	box-sizing: border-box;
	margin: 20px auto;
	background-color: white;
	border-radius: 15px 15px 15px 15px;
	border: 2px solid #E5E5E5;
}

#allnav h3 {
	line-height: 50px;
	padding: 0 20px;
	color: #222222;
}

#allnav p {
	line-height: 30px;
	box-sizing: border-box;
	padding: 10px 0;
	text-align: center;
	color: #222222;
}

#allnav .area, #allnav .kind {
    margin-top:35px;
	width: 100%;
	height: 70px;
	background-color: white;
}

#allnav p {
	width: 12%;
	height: 50%;
	float: left;
}

#allnav ul {
	width: 85%;
	height: 90%;
	margin-right: 50px;
	list-style: none;
	box-sizing: border-box;
	padding: 10px 0;
	float: right;
	border-bottom: 2px solid #E5E5E5;
}

#allnav ul li {
	width: 90px;
	line-height: 30px;
	font-size: 22px;
	list-style: none;
	display: inline-block;
	color: #666666;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor:pointer; 
}
#allnav ul li:hover {
	color: #ff6633;
}
#center {
	width: 1200px;
	height: 330px;
	background: #f6f6f6;
	margin: auto;
	border-top: solid 3px #FF6B37 ;
}

body {
	font-family:楷体;
}

nav a {
	position: relative;
	display: inline-block;
	margin: 15px 25px 0px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
	font-size: 1.35em;
}

nav a:hover, nav a:focus {
	outline: none;
}

.cl {
	position: relative;
	margin-left: 50px;
	z-index: 1;
}

.cl a {
	overflow: hidden;
	margin: 0 30px;
}

.cl a span {
	display: block;
	padding: 10px 40px;
	background: #fffff;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl a:before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	background: #fffff;
	color: gold;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-75%);
}

.cl a:hover span, .cl a:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.cl a:hover::before, .cl a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-decoration: none;
}

#zryc {
	width: 1200px;
	margin: auto;
}

.tdimgc {
	width: 320px;
	height: 240px;
	background-size: 100% 100%;
	cursor:pointer; 
     box-shadow: 2px 2px 5px #000;	
}


.tdimgc:hover {
	width: 340px;
	height: 255px;
	background-size: 100% 100%;
	cursor:pointer; 
    box-shadow: 2px 2px 5px #000;	
}


#zryt {
	font-size: 22px;
	background: rgb(248, 248, 248);
}

.rn {
	font-size: 26px;
	font-weight: bold;
}

#wrap {
	margin-top: 32px;
	float: right;
	width: 360px;
	height: 40px;
	background: rgb(255, 102, 51);
}

#i-t1 {
	width: 290px;
	height: 36px;
	border: 2px solid rgb(255, 102, 51);
	float: left;
}

#i-t1:hover {
	border: 2px solid rgb(255, 102, 51);
}

#i-t2 {
	width: 56px;
	height: 40px;
	border: none;
	background: rgb(255, 102, 51);
	float: left;
	color: white;
	text-align: center;
	line-height: 40px;	
}

#i-t2:hover {
	background: rgb(255, 133, 91);
}
</style>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
	var search1 = "";//美食种类
	var search2 = "";//地区
	$(function() {
		//初始化店铺	
		var searchUrl = window.location.href;
	       //截取 url中的"=" , 获得"="后面的参数
	    var searchData = searchUrl.split("=");
	       //decodeURI解码
	    var va = decodeURI(searchData[1]);
		// 判断是否为其他页面跳转过来的搜索
		
	    if(va!=null && va!='undefined'&& va.trim().length!=0){
	    	search1 = va;
			searchshow2();
	    }else{
		$.ajax({
					url : 'Res?method=getRes',
					dataType : "json",
					type : "post",
					success : function(fansi) {
						var o = fansi.rows;
						for (i = 0; i < o.length; i++) {
							console.log(o.length);
							tr = $("<tr ><td ><div id='"+"r"+o[i].rid+"' class='"+"tdimgc"+"' ></div></td><td><div class="+"rn"+">"
									+ o[i].rname
									+ "</div></br>"
									+ o[i].rtotalass
									+ "条评价"
									+ "</br><br>"
									+ o[i].rkey
									+ "</br><br>"
									+ o[i].rloc
									+ "</td></tr>");
							$("#zryt").append(tr);
							$("#r" + o[i].rid).css("background-image",
									"url(img\/" + o[i].rimg + ")");
						}
					}
				});
    }
		//获得关键词				    
		var findrid = "";
		$("#zloc li").click(function() {
			search2 = $(this).attr("value");
			searchshow();
		});

		$("#ztype li").click(function() {
			search1 = $(this).attr("value");
			searchshow();
		});
		function searchshow() {
			$.ajax({
						url : 'Res?method=getRes',
						dataType : "json",
						type : "post",
						data : {
							"search1" : search1,
							"search2" : search2
						},
						success : function(fansi) {
							$("#zryt").empty();
							var o = fansi.rows;
							for (i = 0; i < o.length; i++) {
								console.log(o[i].rimg);
								tr = $("<tr><td ><div id='"+"r"+o[i].rid+"' class='"+"tdimgc"+"' ></div></td><td><div class="+"rn"+">"
										+ o[i].rname
										+ "</div></br>"
										+ o[i].rtotalass
										+ "条评价"
										+ "</br><br>"
										+ o[i].rkey
										+ "</br><br>"
										+ o[i].rloc
										+ "</td></tr>");
								rid = o[i].rid;
								$("#zryt").append(tr);
								$("#r" + o[i].rid).css("background-image",
										"url(img\/" + o[i].rimg + ")");
							}
						}
					});
		}
		function searchshow2() {
			$.ajax({
						url : 'Res?method=getR',
						dataType : "json",
						type : "post",
						data : {
							"search1" : search1
			
						},
						success : function(fansi) {
							$("#zryt").empty();
							var o = fansi.rows;
							for (i = 0; i < o.length; i++) {
								console.log(o[i].rimg);
								tr = $("<tr><td ><div id='"+"r"+o[i].rid+"' class='"+"tdimgc"+"' ></div></td><td><div class="+"rn"+">"
										+ o[i].rname
										+ "</div></br>"
										+ o[i].rtotalass
										+ "条评价"
										+ "</br><br>"
										+ o[i].rkey
										+ "</br><br>"
										+ o[i].rloc
										+ "</td></tr>");
								rid = o[i].rid;
								$("#zryt").append(tr);
								$("#r" + o[i].rid).css("background-image",
										"url(img\/" + o[i].rimg + ")");
							}
						}
					});
		}
		//点击跳转到店铺详情	
		$("#zryt").on("click", "tr", function() {
			findrid = $(this).find("div").attr("id").substring(1);
			var searchUrl = encodeURI("ShowRestaurant.html?rid=" + findrid);
		//	location.href = searchUrl;
			window.open(searchUrl, '_blank');
		});
		//搜索框			
		$("#i-t1").focus(function() {
			$("#i-t1").css("outline", "none");
		});
		var va = "";
		$("#i-t2").click(function() {
			$("#i-t2").css("background", "rgba()");
			search1 = $("#i-t1").val();
			searchshow2();
		});
	});
</script>
</head>
<body>
<div id="conb">
	<div id="top" class="top">
		<div id="top1">
			<div id="logo">
				<img src="img/logoword.jpg" />
			</div>
			<div id="wrap">
				<input id="i-t1" placeholder="搜索" size="25" value="" style="padding-left:10px;font-size:18px;">
				<div id="i-t2">
					<h3>搜索</h3>
				</div>
			</div>
		</div>		
		<div id="top2" class="container">
			<section class="c1">
				<nav class="cl">
					<a href="main.html" target="_self" data-hover="主页"><span>主页</span></a>
					<a href="addR.html" target="_self" data-hover="美食收录"><span>美食收录</span></a>
					<a href="block.html" target="_self" data-hover="交流圈子"><span>交流圈子</span></a>
					<a href="usermain.html" target="_self" data-hover="个人主页"><span>个人主页</span></a>
				</nav>
			</section>
		</div>
	</div>	
		<div id="center" class="center">
			<div id="allnav">
				
				<div class="kind">
					<p  style="font-size: 24px;">热门美食</p>
					<ul id="ztype">
						<li name="f1" value="自助餐" >自助餐</li>
						<li name="f2" value="西餐" >西餐</li>
						<li name="f3" value="火锅">火锅</li>
						<li name="f4" value="烧烤" >烧烤</li>
						<li name="f5" value="农家菜" >农家菜</li>
						<li name="f6" value="烤肉" >烤肉</li>
						<li name="f7" value="川菜" >川菜</li>
						<li name="f8" value="面馆" >面馆</li>
						<li name="f9">其他</li>
					</ul>
				</div>
				<div class="area">
					<p  style="font-size: 24px;">热门地区</p>
					<ul id="zloc">
						<li name="a1" value="海曙区" >海曙区</li>
						<li name="a2" value="鄞州区" >鄞州区</li>
						<li name="a3" value="江北区" >江北区</li>
						<li name="a4" value="北仑区" >北仑区</li>
						<li name="a5" value="镇海区" >镇海区</li>
						<li name="a0" >其他</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="zryc">
			<table id="zryt" cellspacing="15" cellpadding="15" width="800px">
			</table>
		</div>
		<div id="bottom" >
      2022 chihuo.com,All Rights Reserved. 本站发布的所有内容，未经许可，不得转载，详见《知识产权声明》
    </div>
	</div>
</body>
</html>